<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <h2>style的绑定</h2>
    <!-- <p :style="'font-size:' + size + 'px'">hello vue!</p> -->

    <!-- 对象的key就是css的属性 -->
    <!-- value就是对应的css的属性值，并且可以使用变量或者表达式 -->
    <!-- 如果这个css的属性，出现了连字符，那么要转成对应的小驼峰或者整体加引号 -->
    <p :style="{ 'font-size': size + 'px', color: color }">hello vue!</p>
    <button v-on:click="fn">btn</button>
  </div>

  <script src="../vue3.js"></script>
  <script>

    // vue对style属性也做了特殊增强
    // 允许并推荐使用对象或者数组的语法
    const {createApp} = Vue;
    createApp({
      data() {
        return {
          size: 20,
          color: "red"
        }
      },
      methods: {
        fn() {
          this.size += 2;
        }
      }
    }).mount("#app");
  </script>
</body>
</html>